<template>
    <div class="content">
        <Panel title="价格管理" :bodyStyle="{padding:'10px'}" :style="{height:scrollerHeight}">
            <div class="tool">
                <SearchBox style="width:300px"
                           placeholder="输入搜索关键词"

                           @search="onSearch($event)">
                    <Addon>
                                            <span v-if="value" class="textbox-icon icon-clear" title="Clear value"
                                                  @click="value=null"></span>
                    </Addon>
                    <Menu>
                        <MenuItem value="productName" text="商品名称搜索" iconCls="icon-ok"></MenuItem>
                        <MenuItem value="productNum" text="商品货号搜索" iconCls="icon-ok"></MenuItem>
                        <MenuItem value="contact" text="供应商搜索" iconCls="icon-man"></MenuItem>
                    </Menu>
                </SearchBox>
                <LinkButton iconCls="icon-add" style="margin-left: 30px" @click="addNewPrice">新增价格</LinkButton>
            </div>
            <div class="data">
                <div class="tree">
                    <Tree :data="selectdata" @selectionChange="selectnode" style="height: 100%;width: 100%"></Tree>
                </div>
                <div class="datagrid" :style="{width:datagridWidth}">
                    <DataGrid :data="data" :clickToEdit="true" selectionMode="cell" frozenWidth="330px"
                              editMode="cell" :style="{height:datagridHeight,width:datagridWidth}" >
                        <GridColumn field="productNum" title="货号" align="center"  :frozen="true" width="100px"></GridColumn>
                        <GridColumn field="productName" title="商品名称" align="center" :frozen="true"  width="230px"></GridColumn>
                        <GridColumn field="categoryName" title="商品类别" align="center"  width="230px"></GridColumn>
                        <GridColumn field="productSpecification" title="商品规格" align="center" width="180px"></GridColumn>
                        <GridColumn field="material" title="成  分" align="center" width="80px"></GridColumn>
                        <GridColumn field="width" title="门  幅" align="center" width="80px"></GridColumn>
                        <GridColumn field="size" title="尺  码" align="center" width="80px"></GridColumn>
                        <GridColumn field="priceIn" title="进货单价" align="center" width="80px"></GridColumn>
                        <GridColumn field="contactName" title="供应商" align="center" width="120px"></GridColumn>
                        <GridColumn field="supplierProductNum" title="供应商货号" align="center" width="80px"></GridColumn>
                        <GridColumn field="priceSale" title="参考售价" align="center" width="80px"></GridColumn>
                        <GridColumn field="detail" title="备  注" width="200px" align="center"></GridColumn>
                    </DataGrid>
                    <Pagination :total="total" :pageSize="pageSize" :pageNumber="currentPage" :layout="layout1"
                                :displayMsg="displayMsg" @pageChange="onPageChange($event)"></Pagination>
                </div>

            </div>
        </Panel>
        <!--新增价格对话框-->
        <Dialog ref="edit"
                :title="dialogTitle"
                :dialogStyle="{width:'550px',height:'700px'}"
                :modal="true"
                :draggable="true"
                :resizable="true">
            <Form ref="form" :model="priceModel" :rules="rules" labelPosition="before" :labelWidth="80" @validate="errors=$event"
                  :floatingLabel="true"  style="max-width:500px;padding: 10px">

                <FormField  label="货号">
                    <TextBox v-model="priceModel.productNum" name="productNum" @focus="dialogopen()"></TextBox>
                </FormField>
                <FormField  label="商品名称">
                    <TextBox v-model="priceModel.productName" name="productName" inputId="productName" v-Tooltip="getTipOpts('productName')" @focus="dialogopen()"></TextBox>
                </FormField>
                <FormField  label="供应商">
                    <TextBox v-model="priceModel.contactName" name="contactName" inputId="contactName" v-Tooltip="getTipOpts('contactName')"></TextBox>
                </FormField>
                <FormField  label="对方货号">
                    <TextBox v-model="priceModel.supplierProductNum"></TextBox>
                </FormField>

                <FormField  label="商品规格">
                    <TextBox v-model="priceModel.productSpecification"></TextBox>
                </FormField>

                <div class="formline">
                    <div class="formfield">
                        <FormField label="进   价">
                            <TextBox v-model="priceModel.priceIn" @blur="calculate" name="priceIn" inputId="priceIn" v-Tooltip="getTipOpts('priceIn')"></TextBox>
                        </FormField>
                    </div>
                    <div class="formfield">
                        <FormField label="×利润点">
                            <TextBox v-model="priceModel.percent" @blur="calculate" name="percent" inputId="percent" v-Tooltip="getTipOpts('percent')"></TextBox>

                        </FormField>
                    </div>
                    <div class="formfield">
                        <FormField  label="=销售单价">
                            <TextBox v-model="priceSale" readonly></TextBox>
                        </FormField>
                    </div>
                </div>
                <FormField  label="备  注">
                    <TextBox v-model="priceModel.detail" :multiline="true"
                             style="height: 200px;padding: 5px"></TextBox>
                </FormField>
            </Form>
            <div class="tools">
                <LinkButton iconCls="icon-ok" @click="addConfirm()" style="margin-right:10px">确定</LinkButton>
                <LinkButton iconCls="icon-no" @click="$refs.edit.close()" style="margin-right:10px">取消</LinkButton>
            </div>
        </Dialog>

<!--        搜索对话框-->
        <Dialog ref="product"
                :dialogStyle="{width:'950px'}"
                title="选择商品"
                :draggable="true"
                :modal="true">
            <div style="padding:0 20px">
                <div class="productsearchtool">
                    <SearchBox style="width:300px"
                               placeholder="输入搜索关键词"
                               v-model="value"
                               @search="productonSearch($event)">
                        <Addon>
                                            <span v-if="productsearchvalue" class="textbox-icon icon-clear" title="Clear value"
                                                  @click="productsearchvalue=null"></span>
                        </Addon>
                        <Menu>
                            <MenuItem value="product" text="商品搜索" iconCls="icon-ok"></MenuItem>
                            <MenuItem value="productNum" text="货号搜索" iconCls="icon-ok"></MenuItem>
                        </Menu>
                    </SearchBox>
                </div>
                <div class="datagrid" >
                    <!--            数据表格-->
                    <DataGrid :data="productdata"  selectionMode="cell"
                              editMode="cell" :style="{height:'450px',width:'900px'}"
                              :columnResizing="true"
                              @rowDblClick="rowDoubleClick"
                    >
                        <GridColumn field="productNum" title="货  号" align="center"
                                    width="5%"></GridColumn>
                        <GridColumn field="productName" title="商品名称" align="center"
                                    width="25%"></GridColumn>
                        <GridColumn field="categoryName" title="商品分类" align="center" width="10%">
                        </GridColumn>
                        <GridColumn field="productSpecification" title="规格" align="center" width="20%">
                        </GridColumn>
                        <GridColumn field="material" title="成分" align="center" width="10%">
                        </GridColumn>
                        <GridColumn field="width" title="门幅cm" width="7.5%" align="center"></GridColumn>
                        <GridColumn field="weight" title="克重g/m²" width="7.5%" align="center"></GridColumn>
                        <GridColumn field="size" title="尺码" width="5%" align="center"></GridColumn>
                    </DataGrid>
                    <Pagination :total="producttotal" :pageSize="productpageSize" :pageNumber="productcurrentPage" :layout="layout1"
                                :displayMsg="displayMsg" @pageChange="onproductPageChange($event)"></Pagination>
                </div>
            </div>
        </Dialog>

    </div>
</template>

<script>
    import api from "../../../utils/axios/api"
    import "../../../assets/css/common.css"
    import dmzutils from "../../../utils/DmzUtil"
    export default {
        data() {
            return {
                // 对话框搜索的值
                productsearchvalue:null,
                // 对话框产品数据
                productdata:[],
                // 对话框分页的大小
                productpageSize:5,
                // 对话框分页当前页
                productcurrentPage:1,
                // 对话框数据总数
                producttotal:0,

                // 表单错误列表
                errors: {},
                // 0 新增 1编辑
                editTag:0,
                // 验证规则
                rules: {
                    productName: "required",
                    contactName:"required",
                    priceIn: "required",
                    percent: "required",
                },
                // 搜索框绑定的值
                value: null,
                // 销售价格
                priceSale: "0",
                priceModel: {
                    detail: "",
                    productNum: "",
                    productName: "",
                    contactName: "",
                    productSpecification:"",
                    priceIn: "0",
                    percent: "0",
                    supplierProductNum:"",
                    productId:null,
                    userId:null

                },
                // 对话框标题
                dialogTitle: "新增价格",
                // 分页数据总数
                total: 0,
                layout1: [
                    "list",
                    "sep",
                    "first",
                    "links",
                    "prev",
                    "next",
                    "last",
                    "sep",
                    "refresh",
                    "info"
                ],
                displayMsg: "显示 {from} 到 {to} 共计 {total} 项",
                // 树形数据
                selectdata: [],
                // 搜索模型
                searchModel: {
                    productNum:null,
                    productId: null,
                    productName: "",
                    categoryId: null,
                    parentId: 1,
                    contactName: null
                },
                productsearchModel:{
                    productName:"",
                    productNum:null
                },
                // 当前页
                currentPage: 1,
                // 每页数量
                pageSize: 30,
                // 表格数据
                data: [],
            };
        },
        created() {
            this.getCategoryList();
            this.getPriceList();
            this.getProductList();
        },
        computed: {

            datagridHeight: function () {
                return (window.innerHeight - 380) + 'px';
            },
            datagridWidth: function () {
                return (window.innerWidth - 440) + 'px';
            },
            // 滚动区高度
            // (业务需求：手机屏幕高度减去头部标题和底部tabbar的高度，当然这2个高度也是可以动态获取的)
            scrollerHeight: function () {
                return (window.innerHeight - 220) + 'px';
            }
        },
        mounted(){
            this.$refs.edit.close();
            this.$refs.product.close();
        },
        methods: {
            rowDoubleClick(r){
                console.log(r);
                this.priceModel.productSpecification=r.productSpecification;
                this.priceModel.productNum=r.productNum;
                this.priceModel.productName=r.productName;
                this.priceModel.productId=r.productId;
                this.$refs.product.close();
            },
            // 点击打开对话框
            dialogopen(){
                console.log("121");
              this.$refs.product.open();
            },
            // 产品搜索对话框搜索事件
            productonSearch(r){
                console.log(r);
                if(r.category=="product"){
                    this.productsearchModel.productName = r.value;
                }else if(r.category=="productNum"){
                    this.productsearchModel.productNum=r.value;
                }
                this.getProductList();

            },
            // 产品搜索对话框页面改变时事件
            onproductPageChange(e){
                this.productcurrentPage=e.pageNumber;
                this.productpageSize=e.pageSize;
                this.productdata=[];
                this.getProductList();
            },
            // 获取所有商品列表
            async getProductList() {
                let param = {
                    currentPage: this.productcurrentPage,
                    pageSize: this.productpageSize,
                    productName: this.productsearchModel.productName,
                    productNum:this.productsearchModel.productNum,
                    parentId:1,
                    categoryId:null
                };
                let {data: result} = await api.getProductList(param);
                if(result.code==0){
                    this.productdata = result.data.records;
                    this.productpageSize = result.data.size;
                    this.productcurrentPage = result.data.current;
                    this.producttotal = result.data.total;
                }

            },

            onPageChange(e){
                this.currentPage=e.pageNumber;
                this.pageSize=e.pageSize;
                this.data=[];
                this.getPriceList()

            },
            hasError(name) {
                return this.getError(name) != null;
            },
            // 错误气泡提示
            getTipOpts(name) {
                return {
                    content: this.getError(name),
                    closed: !this.hasError(name),
                    position: "right"
                };
            },
            // 表单校验
            getError(name) {
                return this.errors[name] && this.errors[name].length
                    ? this.errors[name][0]
                    : null;
            },
            // 选择树节点时的事件
            selectnode(node){
                this.searchModel.parentId=node.id;
                this.searchModel.categoryId=node.id;
                this.getPriceList();
            },
            // 搜索按钮
            onSearch(r) {
                console.log(r);
                if(r.category=="productName"){
                    this.searchModel.productName=r.value;
                }else if(r.category=="productNum"){
                    this.searchModel.productNum=r.value;
                }else if(r.categoryId=="contactName"){
                    this.searchModel.contactName=r.value;
                }
                this.getPriceList();
            },
            // 新增价格按钮
            addNewPrice() {
                this.editTag=0;
                this.dialogTitle="新增单价";
                this.resetForm();
                this.$refs.edit.open();
            },
            // 确认按钮
            addConfirm() {
                let _this=this;
                _this.$refs.form.validate(()=>{
                    this.priceModel.userId=dmzutils.getSession("userInfo").id;
                    console.log(this.priceModel);
                });

            },
            calculate() {
                this.priceSale = 0;
                this.priceSale = (parseFloat(this.priceModel.percent) * parseFloat(this.priceModel.priceIn)).toFixed(2).toString();
                console.log(this.priceModel.priceIn);
                console.log(this.priceSale);
            },
            // 获取商品分类列表
            async getCategoryList() {
                let param = {
                    categoryName: ""
                };
                let {data: res} = await api.getProductCategorList(param);
                this.selectdata = this.getSelectData(res.data);
            },
            // 递归取选项
            getSelectData(data) {
                let result = [];
                data.forEach(p => {
                    let x = {};
                    x.id = p.categoryId;
                    x.text = p.categoryName;
                    if (p.children.length > 0) {
                        x.children = this.getSelectData(p.children)
                    }
                    result.push(x);
                })
                return result;
            },

            async getPriceList() {
                let param = {
                    currentPage: this.currentPage,
                    pageSize: this.pageSize,
                    productId: this.searchModel.productId,
                    productName: this.searchModel.productName,
                    categoryId: this.searchModel.categoryId,
                    parentId: this.searchModel.parentId,
                    contactName: this.searchModel.contactName,
                    productNum:this.searchModel.productNum
                }
                let {data: res} = await api.getPriceList(param);
                if (res.code == 0) {
                    this.data = res.data.records;
                    this.currentPage = res.data.current;
                    this.pageSize = res.data.size;
                    this.total = res.data.total;
                }
            },
            resetForm(){
                this.priceModel.detail=null;
                this.priceModel.productNum=null;
                this.priceModel.productName=null;
                this.priceModel.priceIn="0";
                this.priceModel.percent="0";
                this.priceModel.contactName=null;
            }
        }
    };
</script>

<style lang="scss" scoped>
    .content {
        margin-top: 0;
        padding: 10px;

        .tool {
            padding: 10px;
            height: 50px;
        }

        .data {
            display: flex;

            .tree {
                border: 1px #e3e3e3 solid;
                width: 180px;
                margin-right: 10px;
            }

            .datagrid {

            }
        }
    }

    .formline {
        display: flex;

        .formfield {
            margin-left: 10px;
        }
    }

    .tools {
        display: flex;
        justify-content: flex-end;

    }
    .datagrid{
        width: 800px;
        height: 500px;
    }
    .productsearchtool{
        padding: 10px;
        height: 50px;
    }

</style>